{# 加载静态资源模块 #}
{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>年级与学生信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static 'css/layui.css' %}">
    <style>
        .section-title {
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }
        .table-container {
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        .layui-table td .layui-btn + .layui-btn {
            margin-left: 5px;
        }

        /* 手动添加表格边框样式 */
        .layui-table {
            border-collapse: collapse; /* 合并边框 */
            width: 100%;
        }
        .layui-table td, .layui-table th {
            border: 1px solid #e6e6e6; /* 添加实线边框 */
            padding: 9px 15px;
            text-align: center;
        }

        /* 表格 hover 效果 */
        .layui-table tbody tr:hover {
            background-color: #f5f7fa;
        }

        /* 操作按钮悬停放大效果 */
        .layui-table .layui-btn-xs:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body class="layui-layout-body">

<div class="layui-container" style="padding: 20px;">

    <!-- 左右布局容器 -->
    <div class="layui-row layui-col-space20">

        <!-- 上方：搜索框 -->
        <div class="layui-col-md12">
            <form method="get" action="" class="layui-form" style="margin-bottom:15px;">
                <div class="layui-input-inline">
                    <input type="text" name="keyword" placeholder="请输入学生姓名或学号" class="layui-input" value="{{ keyword }}">
                </div>
                <button class="layui-btn" lay-submit>搜索</button>
            </form>
        </div>

        <!-- 左侧：年级班级信息 -->
        <div class="layui-col-md4">
            <div class="table-container">
                <h3 class="section-title">年级班级列表</h3>
                <table class="layui-table" lay-skin="line">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>年级班级</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for grade in grades %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ grade.grade }}</td>
                                <td>
                                    <button class="layui-btn layui-btn-xs">编辑</button>
                                    <button class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>

                <!-- 年级分页 -->
                <div style="text-align:center;">
                    <div id="grade-page"></div>
                </div>
            </div>
        </div>

        <!-- 右侧：学生信息 -->
        <div class="layui-col-md8">
            <div class="table-container">
                <h3 class="section-title">学生信息列表</h3>
                <table class="layui-table" lay-skin="line">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>电话</th>
                            <th>学号</th>
                            <th>所属班级</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for student in students %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ student.name }}</td>
                                <td>{{ student.age }}</td>
                                <td>{{ student.get_gender_display }}</td>
                                <td>{{ student.phone }}</td>
                                <td>{{ student.student_id }}</td>
                                <td>{{ student.grade.grade|default:"未分配" }}</td>
                                <td>
                                    <button class="layui-btn layui-btn-xs">编辑</button>
                                    <button class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>

                <!-- 学生分页 -->
                <div style="text-align:center;">
                    <div id="student-page"></div>
                </div>
            </div>
        </div>

    </div>

</div>

<script src="{% static 'js/layui.js' %}"></script>
<script>
layui.use(['laypage'], function () {
    const laypage = layui.laypage;

    // 渲染年级分页
    laypage.render({
        elem: 'grade-page',
        count: parseInt("{{ grades.paginator.count }}") || 0,
        limit: 10,
        curr: parseInt("{{ grades.number }}") || 1,
        theme: '#FF5722',
        layout: ['count', 'prev', 'page', 'next'],
        jump: function(obj, first) {
            if (!first) {
                const keyword = "{{ request.GET.keyword }}";
                let url = `?grade_page=${obj.curr}`;
                if (keyword) url += `&keyword=${encodeURIComponent(keyword)}`;
                location.href = url;
            }
        }
    });

    // 渲染学生分页
    laypage.render({
        elem: 'student-page',
        count: parseInt("{{ students.paginator.count }}") || 0,
        limit: 10,
        curr: parseInt("{{ students.number }}") || 1,
        theme: '#FF5722',
        layout: ['count', 'prev', 'page', 'next'],
        jump: function(obj, first) {
            if (!first) {
                const keyword = "{{ request.GET.keyword }}";
                let url = `?student_page=${obj.curr}`;
                if (keyword) url += `&keyword=${encodeURIComponent(keyword)}`;
                location.href = url;
            }
        }
    });
});
</script>

</body>
</html>
